<!--
@description: 自定义导航栏 demo
-->
<route lang="json5" type="page">
// @formatter:off
{
  style: {
    navigationStyle: 'custom', // custom default
  }
}
 // @formatter:on
</route>

<script setup lang="ts">
/* 返回上一页 */
const goBack = () => {
  uni.redirectTo({ url: '/pages/index/index' })
}

const statusBarHeight = ref(20)
const barHeight = ref(44)

onLoad(() => {
  // 状态栏高度
  statusBarHeight.value = (uni.getSystemInfoSync().statusBarHeight as number) || 0
  // #ifdef MP-WEIXIN
  // 胶囊数据
  const { top, height } = uni.getMenuButtonBoundingClientRect()
  // 自定义导航栏高度 = 胶囊高度 + 胶囊的 padding * 2, 如果获取不到设置为 38
  barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38
  // #endif
})
</script>

<template>
  <view :style="{ height: `${statusBarHeight}px` }" class="bg-[var(--theme-bg-color)]" />
  <view
    class="w-[calc(100vw-24px)] flex items-center justify-between bg-[var(--theme-bg-color)] p-x-12px font-size-16px"
    :style="{ height: `${barHeight}px` }"
  >
    <view class="h-100% w-80rpx flex items-center" @click="goBack">
      <wd-icon name="thin-arrow-left" size="18px" />
    </view>
    <view class="w-[calc(100%-160rpx)] pr-80rpx text-center">自定义导航栏 demo</view>
  </view>
</template>
